<template>
  <div id="topbar">
    <img src="https://hshop.honorfile.com//uomcdn/CN/eoms/202211/0FB146A0403DE27850A217BEEB2B7C48.gif" alt="">
    <form action="/">
      <van-search placeholder="路由器" 
      shape="round"/>
    </form>
    <van-icon name="chat-o" size="25px" dot/>
  </div>
</template>

<script>

export default {
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
#topbar {
  z-index:999;
  box-sizing: border-box;
  width: 100%;
  height: 3.625rem;
  padding: .9375rem 1.4375rem;
  position:sticky;
  top:0;
  display: flex;
  background:linear-gradient(to bottom,#f9541e,#fd784f);
  justify-content: space-between;
}

#topbar img {
  width: 5rem;
  height: 1.5625rem;
  margin-left:.1875rem;
}

#topbar .van-search {
  box-sizing: border-box;
  width: 12.3125rem;
  height: 1.875rem;
  background:linear-gradient(to bottom,#f9541e,#fd784f);
}
</style>